<template>
	<!-- 校友卡申请 -->
	<view class="schoolfriend-container">
		<!-- 标题 -->
		<view class="title">请完善个人信息</view>

		<!-- 表单区 -->
		<view class="wrap">
			<u--form labelPosition="left" :model="model" :rules="rules" ref="schoolfriend" labelWidth="162rpx" :labelStyle="{
					fontSize: '28rpx',
					fontFamily: 'Source Han Sans CN-Medium, Source Han Sans CN',
					fontWeight: 500,
					color: '#333333',
					lineHeight: '28rpx',
					letterSpacing: '1px'}">
				<u-form-item label="姓名" prop="name" borderBottom ref="item1" @tap="getAddress">
					<view v-if="model.name" class="txt">{{model.name}}</view>
					<view v-else class="place">请输入姓名</view>
				</u-form-item>
				<u-form-item label="地址" prop="habitation" borderBottom ref="item1" @tap="getAddress">
					<view v-if="model.habitation" class="txt">{{model.habitation}}</view>
					<view v-else class="place">请选择地址</view>
				</u-form-item>
				<u-form-item label="手机号" prop="mobile" borderBottom ref="item1" @tap="getAddress">
					<view v-if="model.mobile" class="txt">{{model.mobile}}</view>
					<view v-else class="place">请输入手机号</view>
				</u-form-item>

				<u-form-item label="身份证号" prop="id_card" borderBottom ref="item1">
					<u--input v-model="model.id_card" border="none" placeholder="请输入身份证号"></u--input>
				</u-form-item>

				<u-form-item label="微信" prop="wechat" borderBottom ref="item1">
					<u--input v-model="model.wechat" border="none" placeholder="请输入微信"></u--input>
				</u-form-item>
				<u-form-item label="邮箱" prop="email" borderBottom ref="item1">
					<u--input v-model="model.email" border="none" placeholder="请输入邮箱"></u--input>
				</u-form-item>
				<u-form-item label="工作单位" prop="workplace" borderBottom ref="item1">
					<u--input v-model="model.workplace" border="none" placeholder="请输入工作单位"></u--input>
				</u-form-item>
				<u-form-item label="职务" prop="post" borderBottom ref="item1">
					<u--input v-model="model.post" border="none" placeholder="请输入职务"></u--input>
				</u-form-item>
				<u-form-item label="工作地点" prop="work_location" borderBottom ref="item1">
					<u--input v-model="model.work_location" border="none" placeholder="请输入工作地点"></u--input>
				</u-form-item>
				<u-form-item label="行业" prop="career" borderBottom ref="item1">
					<u--input v-model="model.career" border="none" placeholder="请输入行业"></u--input>
				</u-form-item>

				<!-- 分割线 -->
				<view style="width: 100%; height: 20rpx; background-color: #f6f6f6; margin-top: 40rpx;"></view>

				<u-form-item label="学历" prop="degree" borderBottom ref="item1">
					<u--input v-model="model.degree" border="none" placeholder="请输入学历"></u--input>
				</u-form-item>
				<u-form-item label="专业" prop="major" borderBottom ref="item1">
					<u--input v-model="model.major" border="none" placeholder="请输入专业"></u--input>
				</u-form-item>
				<u-form-item label="学院" prop="college" borderBottom ref="item1" @tap="goColleges">
					<view v-if="model.college" class="txt">{{model.college}}</view>
					<view v-else class="place">请选择学院</view>
				</u-form-item>
				<u-form-item label="在校时间" prop="school_time" borderBottom ref="item1">
					<u--input v-model="model.school_time" border="none" placeholder="请输入在校时间,例:2021-2023"></u--input>
				</u-form-item>
			</u--form>
		</view>

		<!-- 底部按钮 -->
		<BottomButton @setHandleBtn="getHandleBtn">
			<template>
				<view>申请校友卡</view>
			</template>
		</BottomButton>
	</view>
</template>

<script>
	import BottomButton from '@/componets/BottomButton/BottomButton.vue'
	export default {
		data() {
			return {
				// 校友卡申请表单内容
				model: {},
				// 校友卡申请表单验证规则
				rules: {
					'name': [{
							type: 'string',
							required: true,
							message: '请填写姓名',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '请正确填写姓名'
						}
					],
					'habitation': {
						type: 'string',
						required: true,
						message: '请选择地址',
						trigger: ['blur', 'change']
					},
					'mobile': [{
							type: 'string',
							required: true,
							message: '请填写手机号',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '请正确填写手机号'
						},
					],
					'id_card': [{
						type: 'string',
						required: true,
						message: '请填写身份证号',
						trigger: ['blur', 'change']
					}, {
						pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '请正确填写身份证号'
					}],
					'email': [{
						type: 'string',
						required: true,
						message: '请填写邮箱',
						trigger: ['blur', 'change']
					}, {
						pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '请正确填写邮箱'
					}],
					'wechat': {
						type: 'string',
						required: true,
						message: '请填写微信',
						trigger: ['blur', 'change']
					},
					'workplace': {
						type: 'string',
						required: true,
						message: '请填写工作单位',
						trigger: ['blur', 'change']
					},
					'post': {
						type: 'string',
						required: true,
						message: '请填写职务',
						trigger: ['blur', 'change']
					},
					'work_location': {
						type: 'string',
						required: true,
						message: '请填写工作地点',
						trigger: ['blur', 'change']
					},
					'career': {
						type: 'string',
						required: true,
						message: '请填写行业',
						trigger: ['blur', 'change']
					},
					'degree': {
						type: 'string',
						required: true,
						message: '请填写学历',
						trigger: ['blur', 'change']
					},
					'school_time': [{
						type: 'string',
						required: true,
						message: '请选择在校时间',
						trigger: ['blur', 'change']
					}, {
						pattern: /^(19|20)\d{2}-(19|20)\d{2}$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '请正确填写在校时间，例：2021-2023'
					}],
					'college': {
						type: 'string',
						required: true,
						message: '请填写学院',
						trigger: ['blur', 'change']
					},
					'major': {
						type: 'string',
						required: true,
						message: '请填写专业',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		methods: {

			/**
			 * 去选择学院
			 */
			goColleges() {
				uni.navigateTo({
					url: '/pages/screenColleges/screenColleges'
				})
			},

			/**
			 * 点击提交
			 */
			getHandleBtn() {
				// 验证实名认证规则
				this.$refs.schoolfriend.validate().then(res => {
					// 先提交注册信息
					this.$request.post({
						url: '/api/users/alumniCardSign',
						data: this.model,
						success: res => {
							if (res.code != 200) return uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							uni.showToast({
								title: res.msg,
								icon: 'success',
								mask: true,
								success: () => {
									uni.navigateBack()
								}
							})
						}
					})
				})
			},

			/**
			 * 获取地址信息和姓名
			 */
			getAddress() {
				uni.chooseAddress({
					success: res => {
						this.model.name = res.userName
						this.model.habitation = res.provinceName + res.cityName + res.countyName + res.detailInfo
						this.model.mobile = res.telNumber
					}
				})
			},
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.schoolfriend.setRules(this.rules)
		},
		onShow() {
			if (uni.getStorageSync('college')) {
				this.model.college = uni.getStorageSync('college').name
				uni.removeStorageSync('college')
			}
		},
		onLoad(options) {
			if (!options.detail) uni.navigateBack()
			this.model = JSON.parse(options.detail) || {}
			for (let key in this.model) {
				if (this.model[key] == null) {
					this.model[key] = ''
				}
			}
			this.model.habitation = ''
			this.model.career = ''
			this.model.wechat = ''
			this.model.work_location = ''
		},
		components: {
			BottomButton
		}
	}
</script>

<style lang="scss" scoped>
	.schoolfriend-container {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		overflow: hidden;
		position: relative;
		z-index: 9;
		padding-bottom: 258rpx;
		box-sizing: border-box;

		>.title {
			margin: 20rpx 40rpx 0;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #333333;
			line-height: 28rpx;
			letter-spacing: 1px;
		}

		>.wrap {
			width: 100%;
			box-sizing: border-box;
			margin-top: 40rpx;

			/deep/.u-form-item {
				width: calc(100% - 80rpx);
				margin: 0 40rpx;
			}

			.place {
				color: #c0c4cc;
				font-size: 30rpx;
				line-height: 52rpx;
			}

			.txt {
				color: #303133;
				font-size: 30rpx;
				line-height: 52rpx;
			}
		}
	}
</style>